<template>
  <div>
    <a-select v-model="value" mode="multiple" style="width: 30%" placeholder="选择查看的指数类型" option-label-prop="label">
      <a-select-option v-for="(item, index) in weatherIndex" :key="index" :value="item.name" :label="item.name">
        {{ item.name }}
      </a-select-option>
    </a-select>
    <div v-for="(item, index) in IndexInfo" :key="index">
      <h2 style="margin-top: 20px;">生活指数类型: {{ item.name }}</h2>
      <p>{{ item.name }}预报等级: {{ item.category }}</p>
      <p>生活指数详细描述: {{ item.text }}</p>
      <p>预报日期: {{ item.date }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { mapState } from 'vuex'
import { KEY, API_Indices } from '@/common/constrant.js'

export default {
  //数据初始化
  data() {
    return {
      weatherIndex: {},
      value: ['运动指数'],
      IndexInfo: {}
    }
  },
  //映射
  computed: {
    ...mapState([
      "location"
    ])
  },
  //方法
  methods: {
    getData() {
      axios.get(API_Indices, {
        params: {
          key: KEY,
          location: this.location.id,
          type: 0
        }
      }).then(res => {
        // console.log(res);
        this.weatherIndex = res.data.daily;
        this.initIndexInfo();
      })
    },
    //过滤
    initIndexInfo() {
      this.IndexInfo = this.weatherIndex.filter(item => this.value.includes(item.name));
    }
  },
  mounted() {
    this.getData()
    this.initIndexInfo()
  },
  watch: {
    value(newValues) {
      console.log("参数", newValues);
      this.IndexInfo = this.weatherIndex.filter(item => newValues.includes(item.name));
      console.log("指数信息", this.IndexInfo);
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.container {
  padding: 20px;
  background: linear-gradient(to bottom right, #87CEEB, #B0E0E6); /* 更改为海洋蓝和浅天蓝渐变 */
  border-radius: 16px; /* 增大圆角使其更可爱 */
  box-shadow: 0 6px 12px rgba(0, 135, 206, 0.2); /* 添加海洋蓝阴影效果 */
}
 
/* 选择框样式 */
:deep(.ant-select) {
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px solid #ADD8E6; /* 淡天蓝色边框 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
}
 
:deep(.ant-select:hover) {
  border-color: #00BFFF; /* 星空蓝边框 */
  box-shadow: 0 4px 8px rgba(0, 191, 255, 0.2); /* 星空蓝阴影 */
}
 
/* 天气指数卡片样式 */
div[v-for] {
  background: #F0FFFF; /* 浅天蓝色背景 */
  padding: 15px 20px;
  margin: 15px 0;
  border-radius: 16px;
  border-left: 8px solid #00BFFF; /* 星空蓝边框 */
  box-shadow: 0 6px 12px rgba(0, 135, 206, 0.1); /* 海洋蓝阴影 */
  transition: all 0.3s ease;
}
 
div[v-for]:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 135, 206, 0.2); /* 加深海洋蓝阴影 */
  border-left: 8px solid #1E90FF; /* 悬停时变为更深的星空蓝边框 */
}
 
/* 标题样式 */
h2 {
  font-size: 1.7em;
  color: #00008B; /* 深蓝色标题 */
  margin-top: 20px;
  font-weight: 600;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8); /* 添加柔和的文本阴影 */
}
 
/* 段落样式 */
p {
  font-size: 1em;
  line-height: 1.8;
  margin: 12px 0;
  color: #4682B4; /* 海洋蓝灰色 */
  font-family: 'Arial', sans-serif; /* 尝试使用更圆润的字体 */
}
 
/* 不同类型信息的样式 */
p:nth-child(2) {
  color: #8A2BE2; /* 星空紫色 */
}
 
p:nth-child(3) {
  color: #4B0082; /* 深蓝色 */
}
 
p:nth-child(4) {
  color: #87CEFA; /* 浅天蓝色 */
}
 
/* 鼠标悬停效果 */
div {
  transition: all 0.3s ease;
}
</style>